<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org" lang="zh">
<head th:replace="commons :: head('制定课程计划表')">
    <title>Messages : Create</title>
</head>
<body>
<div th:insert="professor/professor::nav(0)">
</div>

<div class="container">
    <div class="row">
        <div class="modal fade" id="modal">
            <div class="modal-dialog">
                <div class="modal-content" style="width: 700px;">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal"><span>&times;</span></button>
                        <h4 class="modal-title">请选择先择课程(可以为空)</h4>
                    </div>
                    <div class="modal-body">
                        <form class="form-horizontal">
                            <div class="form-group">
                                <label for="semId" class="col-sm-2 control-label">学年度：</label>
                                <div class="col-sm-10">
                                    <input hidden id="semId" name="semId" >
                                    <div  id="sem"></div>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="name_input" class="col-sm-2 control-label">课程名称：</label>
                                <div class="col-sm-10">
                                    <select name="prerequisite" class="form-control" id="name_input"></select>
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        <button id="save_click" type="button" class="btn btn-primary">保存</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <table id="table" class="table table-responsive table-hover">
            <thead>
            <tr>
                <td>课程号</td>
                <td>课程名</td>
                <td>课程学分</td>
                <td>类型</td>
                <td>课程费用</td>
                <td>操作</td>
            </tr>
            </thead>
            <tbody></tbody>
        </table>
    </div>
    <div class="row">
        <div class="col-md-6" id="page_info">
        </div>
        <div class="col-md-6">
            <nav aria-label="Page navigation">
                <ul class="pagination" id="page_nav">
                </ul>
            </nav>
        </div>
    </div>
    <div th:replace="commons::footer"></div>
    <script>
        var click_id, curPage, total;
        $(function () {
            toPageNum(1);
        });
        $("#save_click").click(function () {
            var data=$("#modal form").serialize()+"&courseId="+click_id;
            $.ajax({
                url: 'addCourseOffering',
                data: data,
                type: 'post',
                success: function (result) {
                   alert(result.extend.data);
                   toPageNum(curPage);
                   if (result.code===100)$('#modal').modal('hide');
                }
            })
        });
        function toPageNum(page) {
            $.ajax({
                url: "getCourses",
                data: "page=" + page,
                type: "get",
                success: function (result) {
                    build_tables(result.extend.pageInfo.list);
                    build_page_info(result.extend.pageInfo);
                    build_page_nav(result.extend.pageInfo);
                }
            });
        }

        //构建信息表
        function build_tables(result) {
            $("#table tbody").empty();
            $.each(result, function (index, item) {
                var id = $("<td></td>").append(item.id);
                var name = $("<td></td>").append(item.name);
                var courseScore = $("<td></td>").append(item.courseScore);
                var level = $("<td></td>").append(item.level);
                var fee = $("<td></td>").append(item.fee);
                var editBtn = $("<button></button>").addClass("btn btn-primary btn-sm select_btn")
                    .append($("<span></span>").addClass("glyphicon glyphicon-edit")).append("选择");
                var btnTd = $("<td></td>").append(editBtn);
                $("<tr></tr>").append(id, name, courseScore, level, fee, btnTd).appendTo("#table tbody").attr("item_id", item.id);
            })
        }

        //构建分页信息
        function build_page_info(result) {
            total = result.pages;
            curPage = result.pageNum;
            $("#page_info").empty();
            $("#page_info").append("当前第" + result.pageNum + "页，总" + result.pages + "页，总" + result.total + "条记录。")
            total = result.pages;
        }

        //构建分页导航条
        function build_page_nav(result) {
            $("#page_nav").empty();
            var firstLi = $("<li></li>").append($("<a></a>").append("首页").attr("href", "javascript:toPageNum(1);"));
            var preLi = $("<li></li>").append($("<span></span>").append("&laquo;")).click(function () {
                toPageNum(result.prePage)
            });
            var nextLi = $("<li></li>").append($("<span></span>").append("&raquo;")).click(function () {
                toPageNum(result.nextPage)
            });
            var lastLi = $("<li></li>").append($("<a></a>").append("末页").attr("href", "javascript:toPageNum(" + result.pages + ");"));

            if (!result.hasPreviousPage) {
                firstLi.addClass("disabled");
                preLi.addClass("disabled").unbind("click");
            }
            if (!result.hasNextPage) {
                nextLi.addClass("disabled").unbind("click");
                //lastLi.addClass("disabled").firstChild().removeAttr("href");
            }
            $("#page_nav").append(firstLi, preLi);
            $.each(result.navigatepageNums, function (index, item) {
                var numLi = $("<li></li>").append($("<a></a>").append(item).attr("href", "javascript:toPageNum(" + item + ");"));
                if (item === result.pageNum) {
                    numLi.addClass("active");
                }
                $("#page_nav").append(numLi);
            });
            $("#page_nav").append(nextLi, lastLi);
        }

        //选择课程
        $(document).on("click", ".select_btn", function () {
            click_id = $(this).parent().parent().attr("item_id");
            $.ajax({
                url: 'getSem',
                type: 'get',
                success: function (result) {
                    $('#semId').val(result.extend.data.id);
                    $('#sem').append(result.extend.data.sem);
                }
            });
            $.ajax({
                url: 'getAllCourses?id=' + click_id,
                type: 'get',
                success: function (result) {
                    $('#name_input').empty();
                    var optionEle = $("<option></option>").append(this.name).attr("value",null);
                    optionEle.appendTo('#name_input');
                    var data = result.extend.data;
                    if (result.code === 100) {
                        $.each(data,function(){
                            var optionEle = $("<option></option>").append(this.name).attr("value",this.id);
                            optionEle.appendTo('#name_input');
                        });
                        $("#modal").modal({
                            backdrop: "static"
                        });
                    }
                }
            })
        });


    </script>
</div>
</body>
</html>